<script setup>
import { ref, reactive, onBeforeMount } from 'vue'
import CamerManCard from '../../components/CamerManCard.vue';
import { rankList } from '@/api/index'
import './talent.scss'

const state = reactive({
  options1: [
    { text: '拍摄年限', value: null },
    { text: '1年以上', value: 1 },
    { text: '3年以上', value: 3 },
    { text: '5年以上', value: 5 }
  ],
  value1: null,
})
const listStatus = ref('loadmore');
const list = ref([])
let paging = { page: 1, size: 20 }
let total = 0

function queryList(){
    let parame = {...paging, time: state.value1}
    rankList(parame).then(res=>{
        if(res.meta){
            total = res.meta.last_page
        }
        if(res.data){
            list.value = list.value.concat(res.data)
        }
    })
}

onBeforeMount(()=>{
    queryList()
})

function handleChange(){
    list.value = []
    paging.page = 1
    queryList()
}

const loadMore = () => {
    if(paging.page >= total) return listStatus.value = 'nomore';
    listStatus.value = 'loading'
    if(paging.page < total){
        paging.page += 1;
        queryList()
    }
}

defineExpose({
  loadMore,
})
</script>

<template>
  <view class="bg page">
    <view class="select-box">
      <nut-menu title-class="selectTitleClass">
        <nut-menu-item v-model="state.value1" :options="state.options1" @change="handleChange"/>
      </nut-menu>
    </view>
    <view class="list">
      <camer-man-card v-for="(item,key) in list" :key="key" :item="item"></camer-man-card>
      <template v-if="list.length>0">
          <nut-divider v-if="listStatus=='loading'">加载中...</nut-divider>
          <nut-divider v-else-if="listStatus=='nomore'">没有更多了</nut-divider>
      </template>
      <nut-empty description="暂无数据" v-else></nut-empty>
    </view>
  </view>
</template>
